<script setup lang="ts">
import Header from '@/subcontract/home/merchantProduct/component/Header.vue';
import { useAppStore } from '@/store';
import HomeRequest from '@/request/homeRequest';
import { navigate } from '@/utils/navigate';
import MerchantDetail from '@/subcontract/home/merchantProduct/component/MerchantDetail.vue';
import ProductRegion from '@/subcontract/home/merchantProduct/component/ProductRegion.vue';
import ShoppingCart from '@/subcontract/home/component/ShoppingCart.vue';
import SkuSelectionPopup from '@/subcontract/home/component/SkuSelectionPopup.vue';
import SkuPackageSelectionPopup from '@/subcontract/home/component/SkuPackageSelectionPopup.vue';
import { useSelectorQuery } from '@/hooks/useSelectorQuery';

interface IState {
  merchantList: IObtainMerchantListRes[];
  merchantInfo?: IObtainMerchantListRes;
  merchantId: number;
  collect: boolean;
  contentHeight: number;
  productRegionScroll: boolean;
  hasBottom: boolean;
  hasShoppingCart: boolean;
  collection: boolean;
  productScroll: number;
  productRegionhasInsuHeight: boolean;
}

const store = useAppStore();
const { btnInformation, beeperId, beeperParams, systemInfo, tabbarHeight } = store.$state;
const state = reactive<IState>({ merchantList: [], merchantId: 0, hasShoppingCart: false, collect: false, contentHeight: 0, productRegionScroll: false, hasBottom: false, collection: false, productScroll: 0, productRegionhasInsuHeight: false });

onLoad(() => {
  fetchObtainMerchantList();
});

// 获取商户列表、计算可滚动区域的高度
const fetchObtainMerchantList = () => {
  const params = { type: 1, btnId: btnInformation!.id, beeperId, btnType: btnInformation!.btnType, classifyIds: btnInformation!.classifyIds, ...beeperParams };
  HomeRequest.ObtainMerchantList({ ...params, hasLoading: true })
    .then((res) => {
      if (res.data.length > 0) {
        state.merchantList = res.data;
        if (state.merchantId) {
          state.merchantInfo = res.data.find((item) => item.id === state.merchantId);
        } else {
          state.merchantId = res.data[0].id;
          state.merchantInfo = res.data[0];
        }
        useSelectorQuery('#merchantProductHeader', null).then((res) => {
          state.contentHeight += res.height!;
          state.contentHeight += state.merchantList.length > 1 ? 44 : 0;
        });
      }
    })
    .catch((err) => {
      if (err === '并非该按钮中商户的会员') {
        navigate({ type: 'navigateBack', url: '' });
      }
    });
};

// 切换商户
const handleMerchantChnage = (e: any) => {
  state.merchantId = e.detail.name;
  state.merchantInfo = state.merchantList.find((item) => item.id === e.detail.name);
};

// 处理滚动事件
const handleScrollViewScroll = (e: any) => {
  const { scrollTop, scrollHeight } = e.detail;
  const { windowHeight } = systemInfo;
  if (scrollTop + windowHeight - state.contentHeight - tabbarHeight >= scrollHeight && !state.productRegionhasInsuHeight) {
    state.productRegionScroll = true;
  }
};
</script>

<template>
  <Header id="merchantProductHeader" />
  <van-tabs @change="handleMerchantChnage" v-if="state.merchantList.length > 1">
    <van-tab :title="item.name" :name="item.id" v-for="item in state.merchantList" :key="item.id" />
  </van-tabs>
  <scroll-view v-if="state.merchantId && state.merchantInfo" :scroll-y="!state.productRegionScroll" @scroll="handleScrollViewScroll" class="overflow-hidden" :style="{ height: `calc(100vh - ${state.contentHeight + (state.hasShoppingCart ? tabbarHeight : 0)}px)` }">
    <MerchantDetail id="merchantDetail" :merchant-info="state.merchantInfo" :collection="state.collection" @collection="({ hasViewCollection }) => (state.collection = hasViewCollection)" />
    <ProductRegion
      :merchantId="state.merchantId"
      :scroll="state.productRegionScroll"
      :collection="state.collection"
      @productScroll="
        ({ scrollTop, hasInsuHeight }) => {
          if (scrollTop === 0) state.productRegionScroll = false;
          state.productScroll = scrollTop;
          state.productRegionhasInsuHeight = hasInsuHeight;
        }
      "
      @prodLoadSuccess="({ result }) => (state.hasShoppingCart = result)"
    />
  </scroll-view>
  <ShoppingCart v-if="state.hasShoppingCart" />
  <SkuSelectionPopup />
  <SkuPackageSelectionPopup />
</template>
